<template>
	<view class="page" :style="{minHeight:$height()}">
		<view class="title" style="margin-bottom: 16rpx;">
			信息确认
		</view>

		<view class="item" style="margin-bottom: 16rpx;display: flex;justify-content: center;align-items: center;">
			<u-radio-group v-model="form.userType" width="250rpx" style="margin-left: 80px;" @change="radioClearItem">
				<u-radio :name="0">个人</u-radio>
				<u-radio :name="1">法人</u-radio>
				<!-- <u-radio :name="2">合伙人</u-radio> -->
			</u-radio-group>
		</view>
		<view class="title">上传身份证
			<!-- <text class="biTian">(非必填)</text> -->
		</view>
		<view class="idBox">
			<view class="idTitle">
				* 为保障账户及资金安全，请确认身份信息的真实有效。
			</view>
			<view class="idImageBox" style="float: left;margin-left: 52rpx;">
				<image @click="selectFile()"
					:src="form.cardFrontImage !== '' ? $utils.imagePath(form.cardFrontImage):'../../static/image/front.png'"
					style="width: 288rpx; height: 190rpx;"></image>
				<view class="imageTxt">
					请拍摄并上传身份证人像面
				</view>
			</view>
			<view class="idImageBox" style="float: left;margin-left: 52rpx;">
				<image @click="selectFile1()"
					:src="form.cardReverseImage !== '' ? $utils.imagePath(form.cardReverseImage) :'../../static/image/back.png'"
					style="width: 288rpx; height: 190rpx;"></image>
				<view class="imageTxt">
					请拍摄并上传身份证国徽面
				</view>
			</view>
			<view class="idImageBox" style="float: left;margin-left: 52rpx;" v-if="form.userType == 1">
				<image @click="selectFile2()"
					:src="form.businessLicense !== '' ? $utils.imagePath(form.businessLicense) :'../../static/image/front.png'"
					style="width: 288rpx; height: 190rpx;"></image>
				<view class="imageTxt">
					请拍摄并上传营业执照
				</view>
			</view>
		</view>
		<view class="item" style="margin-bottom: 16rpx;">
			<view class="left">
				<text class="info">
					{{ showName(form.userType)}}
				</text>
				<text class="xing">*</text>
			</view>
			<view class="right">
				<u-input v-model="form.realname" style="width:100%;" :placeholder="showNameHedert(form.userType)" />
			</view>
		</view>
		<view class="item" style="margin-bottom: 16rpx;">
			<view class="left">
				<text class="info">
					证件号码
				</text>
				<text class="xing">*</text>
			</view>
			<view class="right">
				<u-input v-model="form.idCard" style="width:100%;" placeholder="请输入证件号码" />
			</view>
		</view>
		<view class="item" style="margin-bottom: 16rpx;" v-if="form.userType == 1">
			<view class="left">
				<text class="info">
					公司名称
				</text>
				<text class="xing">*</text>
			</view>
			<view class="right">
				<u-input v-model="form.companyName" style="width:100%;" :placeholder="`请输入公司名称`" />
			</view>
		</view>
		<view class="item">
			<view class="left">
				<text class="info">
					电话
				</text>
				<text class="xing">*</text>
			</view>
			<view class="right">
				<u-input disabled style="width:75%;" v-model="form.mobile" type="number" placeholder="请授权获取手机" />
				<button class="send" lang="zh_CN" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
					点击授权
				</button>
			</view>
		</view>
		<view class="item">
			<view class="left">
				<text class="info">
					售电经验
				</text>
				<text class="xing">*</text>
			</view>
			<u-radio-group v-model="form.experience">
				<u-radio :name="0">无</u-radio>
				<u-radio :name="1">有</u-radio>
			</u-radio-group>
		</view>
		<view class="item">
			<view class="left">
				<text class="info">
					城市
				</text>
				<text class="xing">*</text>
			</view>
			<view class="right">
				<u-input disabled style="width:75%;" v-model="areaListStr" placeholder="选择省市区" />
				<button class="send" @click="chooseArea">
					选择城市
				</button>
				
				<u-picker mode="multiSelector" v-model="show" :defaultSelector="defaultSelector" range-key="name" :range="areaList" @columnchange="changeArea" @confirm="confirmArea"></u-picker>
			</view>
		</view>
		<view class="item">
			<view class="left">
				<text class="info">地址</text>
				<text class="xing">*</text>
			</view>
			<view class="right">
				<u-input v-model="form.address" style="width:100%;" type="text" placeholder="请输入地址" />
			</view>
		</view>

		

		<view class="footer">
			<view class="compelet" @click="submit">
				完成
			</view>
		</view>

		<u-upload style="display: none;" :action="action" @on-uploaded="onUploaded" ref="uUpload" :width="288"
			:height="190" :max-count="1"></u-upload>
		<u-upload style="display: none;" :action="action" @on-uploaded="onUploaded1" ref="uUpload1" :width="288"
			:height="190" :max-count="1"></u-upload>
		<u-upload style="display: none;" :action="action" @on-uploaded="onUploaded2" ref="uUpload2" :width="288"
			:height="190" :max-count="1"></u-upload>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				shiqu: [],
				// userType:0,
				form: {
					userType: 0,
					experience: 0,
					realname: '',
					companyName: '',
					idCard: '',
					cardFrontImage: '',
					cardReverseImage: '',
					businessLicense: '',
					mobile: '',
					provinceList: '' //合伙省份id

				},
				areaListStr: "",
				defaultSelector:[0,0],
				areaList: [
					[{
						id: 0,
						name: '请选择'
					}],
					[{
						id: 0,
						name: '请选择'
					}]
				],
				pid: "0",
				show: false,
				action: this.$axios.interfaceUrl() + "/upload",
				show: false,
				cityList: [],
				type: 0,
				userinfo: uni.getStorageSync("userinfo"),
				heHuoShengFenData: [],
				cityId: null,
				districtId: null
			}
		},
		onShow() {
			this.form.mobile = this.userinfo.mobile
		},

		onLoad() {
			this.pid = this.userinfo.provinceId
			this.getAreaRes(0)
		},
		methods: {
			
			getAreaRes(idx) {
				this.$axios.request(this.$api.ShiListApi, "GET", {
					pid: this.pid
				}).then((val) => {
					val.data.unshift({
						id: 0,
						name: '请选择'
					})
					this.$set(this.areaList, idx, val.data)
				})
			},
			changeArea(e) {
				this.$set(this.defaultSelector,e.column,e.index)
				if (e.column < 1) {
					this.pid = this.areaList[e.column][e.index].id
					this.getAreaRes(e.column + 1)
				}
			},
			
			confirmArea(e) {
				this.form.cityId = this.areaList[0][e[0]].id
				this.form.districtId = this.areaList[1][e[1]].id

				let arr = [this.areaList[0][e[0]].name, this.areaList[1][e[1]].name]
				this.areaListStr = arr.join(" / ")
			},
			showName(val) {
				let text = ''
				if (val == 0 || val == 2) {
					text = '姓名'
				} else {
					text = '法定代表人'
				}
				return text
			},
			showNameHedert(val) {
				let text = ''
				if (val == 0 || val == 2) {
					text = '请输入姓名'
				} else {
					text = '请输入法定代表人'
				}
				return text
			},
			radioClearItem(e) {
				if (e == 0) {
					this.form.realname = ''
					this.form.idCard = ''
					this.form.companyName = ''
				} else {
					this.form.realname = ''
				}
			},

			// 选择地区 end
			decryptPhoneNumber(e) {
				if (!e.target.iv) {
					uni.showModal({
						content: '获取手机号失败！',
						showCancel: false
					})
					return;
				}

				this.$wechat.getcode().then((code) => {
					this.$axios.request(this.$api.getUserMobile, "GET", {
						code: code.code,
						encryptedData: e.detail.encryptedData,
						ivStr: e.detail.iv
					}).then((val) => {
						if (val.code == 0) {
							this.form.mobile = val.data.mobile
						} else {
							this.$msg.toast("获取手机号码失败")
						}

					})
				})
			},
			chooseArea() {
				this.show = true
			},
			submit() {

				if (this.form.realname == '') {
					if (this.form.userType == 0) {
						this.$msg.toast("姓名不能为空")
					} else {
						this.$msg.toast("法定代表人不能为空")
					}
					return
				}
				if (this.form.companyName == undefined && this.form.userType == 1) {
					return this.$msg.toast("公司名称不能为空")
				}
				if (this.areaListStr == '') {
					return this.$msg.toast("请选择城市")
				}
				
				this.$axios.request(this.$api.register, "POST", this.form).then((val) => {
					this.$msg.toast("提交成功")
					uni.reLaunch({
						url: '/pages/mine/index'
					})
				})
			},

			selectFile() {
				this.$refs.uUpload.selectFile()
			},
			selectFile1() {
				this.$refs.uUpload1.selectFile()
			},
			selectFile2() {
				this.$refs.uUpload2.selectFile()
			},

			onUploaded(e) {
				this.form.cardFrontImage = e[0].response.data.src
				this.$axios.request(this.$api.getIdCard, "GET", {
					image: this.$axios.interfaceUrl() + e[0].response.data.src,
					type: 1
				}).then((val) => {
					this.form.realname = val.data.realname
					this.form.idCard = val.data.idCard
				})

			},
			onUploaded1(e) {
				this.form.cardReverseImage = e[0].response.data.src
			},
			onUploaded2(e) {
				this.form.businessLicense = e[0].response.data.src
				this.$axios.request(this.$api.getIdCard, "GET", {
					image: this.$axios.interfaceUrl() + e[0].response.data.src,
					type: 7
				}).then((val) => {
					this.form.companyName = val.data.companyName
				})

			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		overflow: hidden;
		background-color: #F9F9FB;
	}

	.title {
		width: 686;
		height: 80rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;
		margin: 16rpx auto 0;
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 80rpx;
		color: #333333;
		opacity: 1;
	}

	.item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 90rpx;
		padding: 0 32rpx 0;
		background-color: #FFFFFF;
		margin-bottom: 8rpx;
		margin-bottom: 16rpx;
	}

	.itembie {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		/* height: 90rpx; */
		padding: 10rpx 32rpx 24rpx;
		background-color: #FFFFFF;
		margin-bottom: 8rpx;
		margin-bottom: 16rpx;
	}

	.left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 250rpx;
		height: 64rpx;
	}

	.info,
	.xing {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		color: #333333;
		opacity: 1;
	}

	.xing {
		color: #FF2D55;
		font-size: 30;
		height: 64rpx;
		line-height: 64rpx;
		margin-left: 10rpx;
		padding-top: 7rpx;
	}

	.right {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: 300;
		color: #62656D;


	}

	.right input {
		width: 100% !important;
	}

	.compelet {
		width: 686rpx;
		height: 80rpx;
		background-color: #2E6ADF;
		opacity: 1;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 80rpx;
		margin: 0 auto 0;
		text-align: center;
		color: #FFFFFF;
		opacity: 1;
	}

	.biTian {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #62656D;
		margin-left: 20rpx;
	}

	.idBox {
		overflow: hidden;
		/* height: 420rpx; */
		background-color: #FFFFFF;
		margin: 16rpx 0;
	}

	.idTitle {
		height: 28rpx;
		font-size: 26rpx;
		font-weight: 300;
		line-height: 28rpx;
		color: #FF2D55;
		margin: 32rpx;
	}

	.idImageBox {
		width: 288rpx;
		height: 250rpx;
		margin: 20rpx 0rpx;
	}

	.imageTxt {
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 33rpx;
		color: #707070;
		opacity: 1;
		margin-top: 20rpx;
	}

	.footer {
		display: flex;
		align-items: center;
		overflow: hidden;
		width: 100%;
		height: 227rpx;
		background-color: #FFFFFF;
		margin-top: 16rpx;
	}

	.send {
		height: 40rpx;
		font-size: 24rpx;
		font-weight: 300;
		line-height: 40rpx;
		color: #2E6ADF;
		border: 1rpx solid #2E6ADF;
		padding: 0 8rpx;
		margin:0px;
	}

	.checkBoxRow {
		/* width: 200rpx; */
		display: inline-block;
		/* background-color: #2E6ADF; */
		/* margin-right: 60rpx;
		 */
		/* margin: 30rpx; */
	}

	.right1 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* background-color: red; */
	}
</style>